<template>
  <div style="background: #ffffff;">
    <van-sticky>
      <van-nav-bar>
        <div slot="left">
          <personBtn></personBtn>
        </div>
        <div slot="title">
          <img class="icctop" src="../nav/icc.png" alt="">
        </div>
        <div class="indexdom" slot="right">
          <serachBtn></serachBtn>
          <sortmenu></sortmenu>
        </div>
      </van-nav-bar>
      <div class="sort-menu-tab">
        <ul class="sort-menu-tabUl">
          <router-link
            tag="li"
            class="sort-menu-tabli"
            :class="{active:active==0}"
            to="/centerzh"
          >{{newsTitle.zh.title}}</router-link>
           <router-link
            v-if="computedmenuStatusLocal.dc==1"
            tag="li"
            class="sort-menu-tabli"
            :class="{active:active==2}"
            to="/centerdc?channel=dc"
          >{{newsTitle.dc.title}}</router-link>
          <router-link
            tag="li"
            class="sort-menu-tabli"
            :class="{active:active==1}"
            v-if="computedmenuStatusLocal.tcl==1"
            to="/centertcl?channel=tcl"
          >{{newsTitle.tcl.title}}</router-link>
         
          <router-link
            tag="li"
            class="sort-menu-tabli"
            :class="{active:active==3}"
            to="/centerdlg?channel=dlg"
            v-if="computedmenuStatusLocal.dlg==1"
          >{{newsTitle.dlg.title}}</router-link>
        </ul>
      </div>
    </van-sticky>
    <select-menu v-if="selectMenuFalgs"></select-menu>
  </div>
</template>

<script type="text/ecmascript-6">
import selectMenu from "./selectmenu";
import personBtn from "../person/personBtn";
import serachBtn from "../person/searchIcon";
import sortmenu from "../person/sortMenu";
import {newsTitle} from '../../assets/data/menuData.js'
 
export default {
  components: {
    selectMenu,
    personBtn,
    serachBtn,
    sortmenu,
 
  },
  data() {
    return {
      newsTitle,
      active: this.$route.meta.mennuactive,
      menuStatus: this.$store.state.mymenu,
      selectMenuFalg: this.$store.state.nocaches.mymenuShow
    };
  },
  computed: {
    computedmenuStatusLocal() {
      this.menuStatus = this.$store.state.mymenu;
      return this.menuStatus;
    },
    selectMenuFalgs() {
      this.selectMenuFalg = this.$store.state.nocaches.mymenuShow;
      return this.selectMenuFalg;
    }
  },
  watch: {
    $route(to, from) {
      this.active = to.meta.mennuactive;
    }
  }
};
</script>

<style scoped lang="less">

.sort-menu-tab {
  position: relative;
  background: #ffffff;
  height: 54px;
  box-shadow: 0px 0.04rem 0.08rem 0px rgba(0, 0, 0, 0.1);
  .sort-menu-tabUl {
    width: 6.6rem;
    height: 100%;
    display: flex;
    .sort-menu-tabli {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #8b8b8bff;
      position: relative;
      &.active {
        font-size: 0.32rem;
        font-weight: 500;
        color: #1f87e5;
        &:after {
          content: "";
          display: block;
          width: 0.48rem;
          height: 0.08rem;
          background: #1f87e5;
          border-radius: 0.05rem;
          position: absolute;
          left: 50%;
          margin-left: -0.24rem;
          bottom: -0.03rem;
        }
      }
    }
  }
}
.icctop{
    width: .64rem;
}
</style>
